<template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输入手机号码"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select v-model="queryParams.role" placeholder="请选择角色" clearable size="small" style="width: 240px">
          <el-option
            v-for="dict in roleOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          v-hasPermi="['project:member:list']"
        >查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="isvalid && !isProjectMembers">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5" v-if="isvalid && !isProjectMembers">
        <el-button
          type="primary"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >移除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="handleHistory"
          plain
          v-hasPermi="['project:member:historyList']"
        >历史成员变更记录</el-button>
      </el-col>
    </el-row>

    <el-table
      stripe
      v-loading="loading"
      :data="memberList"
      @selection-change="handleSelectionChange"
      @sort-change="tableSortChangeMemberList"
      :default-sort="{prop: 'joinTime', order: 'descending'}"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="姓名"
        align="center"
        prop="nickName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="手机号码"
        align="center"
        prop="phonenumber"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="角色"
        align="center"
        prop="role"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="用户状态"
        align="center"
        prop="status"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status=='正常'"
            type="success"
            disable-transitions
          >{{scope.row.status}}</el-tag>
          <el-tag
            v-if="scope.row.status=='未启用'"
            type="warning"
            disable-transitions
          >{{scope.row.status}}</el-tag>
          <el-tag
            v-if="scope.row.status=='停用'"
            type="danger"
            disable-transitions
          >{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="进行中项目"
        align="center"
        prop="projectName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <!-- <el-table-column
        label="邮箱"
        align="center"
        prop="email"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />-->
      <el-table-column
        label="参与时间"
        align="center"
        prop="joinTime"
        width="180"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.joinTime, '{y}-{m}-{d} ') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="工作内容"
        align="center"
        prop="workContent"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <!-- <el-table-column
        label="工作量(%)"
        align="center"
        prop="workload"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />-->
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateMember(scope.row)"
            v-if="isvalid&&!isProjectMembers"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加项目成员对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px">
      <el-form ref="form" :model="queryAddParams" :rules="rules" :inline="true" label-width="80px">
        <el-form-item label="项目名称" prop="projectName">
          <div class="content" style="width:300px;">{{ queryAddParams.projectName }}</div>
          <!--<el-input v-model="queryAddParams.projectName" placeholder="请输入项目名称" style="width:300px;" disabled />-->
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="queryAddParams.nickName" placeholder="请输入姓名" style="width:240px;"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAddQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="memberAddList"
        @selection-change="handleSelectionChange"
        @sort-change="tableSortChangeAddList"
        :default-sort="{prop: 'userStatus', order: 'ascending'}"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="姓名"
          align="center"
          prop="nickName"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="员工编号"
          align="center"
          prop="jobNo"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="手机号码吗"
          align="center"
          prop="phonenumber"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="用户状态"
          align="center"
          prop="status"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status=='0'">
              <el-tag type="success">正常</el-tag>
            </span>
            <span v-else-if="scope.row.status=='1'">
              <el-tag type="danger">停用</el-tag>
            </span>
            <span v-else>
              <el-tag type="warning">未启用</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="进行中的项目" align="center" prop="projectName" />
        <!--<el-table-column label="设置为项目经理" align="center" >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.role"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>-->
      </el-table>
      <pagination
        v-show="totalAddMember>0"
        :total="totalAddMember"
        :page.sync="queryAddParams.pageNum"
        :limit.sync="queryAddParams.pageSize"
        @pagination="getAddList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" :disabled="multiple||canClick" @click="submitBatchMember">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑项目成员对话框 -->
    <el-dialog :title="title" :visible.sync="openEdit" width="500px">
      <el-form ref="formEdit" :rules="rules" :inline="false" label-width="80px">
        <el-form-item label="姓名" prop="nickName">
          <div class="content">{{ formEdit.nickName}}</div>
          <!--<el-input v-model="formEdit.nickName" placeholder="请输入姓名" disabled />-->
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <div class="content">{{ formEdit.projectName}}</div>
          <!--<el-input v-model="formEdit.projectName" placeholder="请输入项目名称" disabled />-->
        </el-form-item>
        <!--<el-form-item label="项目角色" prop="role">
          <el-radio v-model="formEdit.role" label="0">项目经理</el-radio>
          <el-radio v-model="formEdit.role" label="1">项目成员</el-radio>
        </el-form-item>-->
        <el-form-item label="工作内容" prop="workContent">
          <el-input v-model="formEdit.workContent" type="textarea" placeholder="请输入工作内容" />
        </el-form-item>
        <!-- <el-form-item label="工作量(%)" prop="workload">
          <el-input-number
            v-model="formEdit.workload"
            :min="0"
            placeholder="请输入工作量"
            style="width:100%"
          />
        </el-form-item>-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formEdit.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openEdit = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 历史成员变更记录对话框 -->
    <el-dialog :title="title" :visible.sync="openHistory" width="900px">
      <el-form
        :model="queryHistoryParams"
        ref="queryHistoryForm"
        :inline="true"
        label-width="68px"
        @submit.native.prevent
      >
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="queryHistoryParams.nickName"
            placeholder="请输入姓名"
            clearable
            size="small"
            @keyup.enter.native="handleHistoryQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleHistoryQuery">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        stripe
        v-loading="loading"
        :data="memberHistoryList"
        @selection-change="handleSelectionChange"
        @sort-change="tableSortChangeHistoryList"
        :default-sort="{prop: 'createTime', order: 'descending'}"
      >
        <el-table-column
          label="员工编号"
          align="center"
          prop="jobNo"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="姓名"
          align="center"
          prop="nickName"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phonenumber"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="角色"
          align="center"
          prop="role"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="变更时间"
          align="center"
          prop="createTime"
          width="180"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="工作内容" align="center" prop="workContent" />
        <el-table-column label="工作量" align="center" prop="workload" />-->
        <el-table-column
          label="变更内容"
          align="center"
          prop="remark"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
      </el-table>
      <pagination
        v-show="totalHistory>0"
        :total="totalHistory"
        :page.sync="queryHistoryParams.pageNum"
        :limit.sync="queryHistoryParams.pageSize"
        @pagination="getHistoryList"
      />
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import aTitle from '@/components/Title'
import { listMember, addListMember, getMember, delMember, addMember, updateMember, exportMember, listMemberHistory, addHistory } from "@/api/projectWorkbench/projectList/member";
import { listProject, getProject, delProject, addProject, updateProject, exportProject, isProjectMembers } from "@/api/projectleader/projectGlance";

export default {
  name: "Member",
  components: { aTitle },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      nickNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 总条数
      totalAddMember: 0,
      // 总条数
      totalHistory: 0,
      // 项目成员表格数据
      memberList: [],
      memberAddList: [],
      // 历史成员变更记录列表数据
      memberHistoryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openEdit: false,
      // 是否显示成员历史弹出层
      openHistory: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        userId: undefined,
        role: undefined,
        joinTime: undefined,
        workContent: undefined,
        workload: undefined,
        nickName: undefined
      },
      // 查询参数
      queryAddParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: undefined,
        projectName: undefined
      },
      // 历史成员变更记录查询参数
      queryHistoryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      formEdit: {},
      // 表单校验
      rules: {
      },
      // 角色数据字典
      roleOptions: [],
      multipleSelection: [],
      isProjectMembers: false,
      isvalid: false,
      canClick: false,
    };
  },
  created () {
    this.getList();
    //项目状态
    this.getDicts("sys_project_role").then(response => {
      this.roleOptions = response.data;
    });
    isProjectMembers({ projectId: this.$route.params.id }).then(res => {
      if (res.code === 200) {
        this.isProjectMembers = res.isProjectMembers;
      }
    });
    this.isvalid = sessionStorage.getItem('isvalid') === '1' ? true : false;
  },
  mounted(){
    document.title=document.getElementById("projectNameTitle").innerHTML;
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目主页/业务系统操作说明-项目主页-项目成员.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目主页-项目成员.xlsx")}`;
    },
    /** 查询项目成员列表 */
    getList () {
      this.loading = true;
      this.queryParams.projectId = this.$route.params.id;
      listMember(this.queryParams).then(response => {
        this.memberList = response.rows.map(item => {
          item.role = item.role === "0" ? "项目经理" : "项目成员";
          // item.workload = item.workload == null? "":item.workload + "%";
          if (item.status === "0") {
            item.status = "正常";
          } else if (item.status === "1") {
            item.status = "停用";
          } else if (item.status === "2") {
            item.status = "未启用";
          }
          return item;
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询项目成员添加列表 */
    getAddList () {
      this.loading = true;
      this.queryAddParams.projectId = this.$route.params.id;
      getProject(this.queryAddParams.projectId).then(response => {
        this.queryAddParams.projectName = response.data.name;
      });
      addListMember(this.queryAddParams).then(response => {
        this.memberAddList = response.rows;
        this.totalAddMember = response.total;
        this.loading = false;
      });
    },
    /** 查询历史成员变更记录列表 */
    getHistoryList () {
      this.loading = true;
      this.queryHistoryParams.projectId = this.$route.params.id;
      listMemberHistory(this.queryHistoryParams).then(response => {
        this.memberHistoryList = response.rows.map(item => {
          item.role = item.role === "0" ? "项目经理" : "项目成员";
          // item.workload = item.workload == null? "":item.workload + "%";
          return item;
        });
        this.totalHistory = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        id: undefined,
        projectId: undefined,
        userId: undefined,
        role: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        joinTime: undefined,
        workContent: undefined,
        workload: undefined
      };
      this.resetForm("form");
    },
    // 表单重置
    resetHistory () {
      this.queryHistoryForm = {
        nickName: undefined
      };
      this.resetForm("queryHistoryForm");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleAddQuery () {
      this.queryParams.pageNum = 1;
      this.getAddList();
    },
    /** 搜索按钮操作 */
    handleHistoryQuery () {
      this.queryHistoryParams.pageNum = 1;
      this.getHistoryList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.guid)
      this.nickNames = selection.map(item => item.nickName)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.multipleSelection = selection
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加项目成员";
      this.getAddList();
      this.canClick = false;
    },
    /** 历史成员变更记录 */
    handleHistory () {
      this.resetHistory();
      this.openHistory = true;
      this.title = "历史成员变更记录";
      this.getHistoryList();
    },
    /** 修改按钮操作 */
    handleUpdateMember (row) {
      this.reset();
      const id = row.guid || this.ids
      getMember(id).then(response => {
        this.formEdit = response.data;
        this.openEdit = true;
        this.title = "编辑项目成员";
      });
    },
    /**批量添加项目成员*/
    submitBatchMember () {
      this.canClick = true;
      this.multipleSelection.map(item => {
        item.projectId = this.$route.params.id;
        addMember(item).then(response => {
          if (response.code === 200) {
            this.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          } else {
            this.msgError(response.msg);
          }
          this.canClick = false;
        });
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.formEdit.guid != undefined) {
        updateMember(this.formEdit).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.openEdit = false;
            this.getList();
            // this.handleAddHistory("修改项目：" + this.formEdit.projectName);
          } else {
            this.msgError(response.msg);
          }
        });
      }
    },
    /**handleAddHistory (remark) {
      this.form.remark = remark;
      //同步数据到历史表
      addHistory(this.form).then(response => {
        if (response.code === 200) {
          this.open = false;
        } else {
          this.msgError(response.msg);
        }
      });
    },*/
    /** 删除按钮操作 */
    handleDelete (row) {
      const ids = row.guid || this.ids;
      const nickNames = row.nickName || this.nickNames;
      this.$confirm('是否确认移除项目成员"' + nickNames + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delMember(ids, "prjectGeneral");
      }).then(() => {
        this.getList();
        this.msgSuccess("移除成功");
        //this.handleAddHistory("删除项目：" + this.form.projectName);
      }).catch(function () { });
    },
    tableSortChangeMemberList (column) {
      this.queryParams.pageNum = 1;
      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.getList();
    },
    tableSortChangeAddList (column) {
      this.queryAddParams.pageNum = 1;
      if (column.order === "descending") {
        this.queryAddParams.sortBy = column.prop;
        this.queryAddParams.order = "desc";
      } else {
        this.queryAddParams.sortBy = column.prop;
        this.queryAddParams.order = "asc";
      }
      this.getAddList();
    },
    tableSortChangeHistoryList (column) {
      this.queryHistoryParams.pageNum = 1;
      if (column.order === "descending") {
        this.queryHistoryParams.sortBy = column.prop;
        this.queryHistoryParams.order = "desc";
      } else {
        this.queryHistoryParams.sortBy = column.prop;
        this.queryHistoryParams.order = "asc";
      }
      this.getHistoryList();
    },change(e) {
      this.$forceUpdate();
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  word-break: break-word;
  margin-top: 9px;
  line-height: 1.15;
}
</style>